<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='pageApi' :buttons='buttons'>
        <template #enable='{record}'>
            <a-tag v-if='record.enable' color="success">{{$t('enable')}}</a-tag>
            <a-tag v-else>{{$t('disable')}}</a-tag>
        </template>
    </BPTable>
    
    <BDialog v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <BForm ref='formRef' :label-col='{span : 5}' :fields='formFields'></BForm>
    </BDialog>

</template>

<script lang='ts' setup>
    import { pageApi, deleteApi, saveApi } from '@/api/system/Locale'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'

    import { useI18nStore } from '@/store/i18n'

    const i18n = useI18nStore()

    const visible = ref(false)

    const tableRef = ref()
    const formRef = ref()
    const dialogTitle = ref()

    const formFields:FormField[] = [
        {label : 'id', name : 'id', hidden : true},
        {label : i18n.t('name'), name : 'name', required : true, maxlength : 30},
        {label : i18n.t('code'), name : 'code', required : true, maxlength : 50, valueFormat(v:string){return v.toLocaleUpperCase()}},
        {label : i18n.t('enable'), name : 'enable', type : 'switch'},
        {label : i18n.t('sort'), name : 'sort', type : 'number'},
    ]

    const buttons = ref<SearchButton[]>([
        {
            button : 'add',
            func : () => {
                dialogTitle.value = i18n.t('add')
                formFields.forEach(field => {
                    delete field.defaultValue
                })

                formFields[0].defaultValue = 0
                formFields[3].defaultValue = true

                visible.value = true
            }
        }
    ])

    
    async function submit() {
        const formData = await formRef.value.validate()
        if(formData.sort === '') {
            formData.sort = 1
        }
        const res = await saveApi(formData)
        if(res.success) {
            visible.value = false
            message.success(i18n.t('saveSuccess'))
            tableRef.value.load()
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }

    const columns = ref<Column[]>([
        {
            title : i18n.t('name'),
            dataIndex : 'name',
            align : 'center',
            inSearch : true,
        },

        {
            title : i18n.t('code'),
            dataIndex : 'code',
            align : 'center',
            inSearch : true,
        },

        {
            title : i18n.t('sort'),
            dataIndex : 'sort',
            align : 'center',
        },

        {
            title : i18n.t('enable'),
            dataIndex : 'enable',
            align : 'center',
        },

        {
            title : i18n.t('action'),
            dataIndex : '$action',
            align : 'center',
            $edit(row) {
                dialogTitle.value = i18n.t('edit')
                formFields.forEach(field => {
                    field.defaultValue = row[field.name]
                })
                visible.value = true
            },

            async $delete(row) {
                const res = await deleteApi(row.id)
                if(res.success) {
                    message.success(i18n.t('operateSuccess'))
                    tableRef.value.load()
                }else {
                    message.error(res.msg)
                }
            }
        }
    ])
</script>

<style lang='scss' module>
    .username{
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
</style>